<template>
  <div class="search-device-panel">
    <!-- <div class="panel-header">
      <h3 class="panel-title">搜索设备</h3>
    </div> -->
    <div class="panel-content">
      <!-- 搜索模块 -->
      <div class="search-module">
        <el-input
          v-model="searchValue"
          placeholder="请输入搜索内容"
          class="custom-search-input"
        >
          <template #suffix>
            <i class="custom-search-icon"></i>
          </template>
        </el-input>
      </div>
      <!-- 设备列表 -->
      <div class="device-list-container">
        <div
          v-for="item in deviceList"
          :key="item.id"
          class="device-list-item"
          :class="{
            selected: selectedDevice?.id === item.id,
            offline: item.status === 'offline',
          }"
          @click="selectDevice(item)"
        >
          <!-- 设备图片 -->
          <div class="device-list-item-img">
            <img :src="deviceUAVImage" alt="设备图片" />
          </div>
          <!-- 设备名称 -->
          <div class="device-list-item-info">
            <!-- 设备名称 -->
            <div class="device-name">
              <!-- 名称 -->
              <div class="device-name-text">{{ item.name }}</div>
              <!-- 状态 -->
              <div class="device-status">
                <img
                  class="device-status-img"
                  :src="getStatusIcon(item.status)"
                  alt="设备状态"
                />
                <div class="device-status-text">{{ item.statusText }}</div>
              </div>
            </div>
            <!-- 设备标签 -->
            <div class="device-tag-container">
              <div class="device-tag-item">机场相机</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 收起按钮 -->
    <div class="fold-btn" @click="toggleCollapse">
      <img class="fold-btn-bg" :src="foldBg" alt="左收起背景" />
      <img class="fold-btn-to-left-icon" :class="{ rotated: isCollapsed }" :src="foldIconToLeft" alt="向左收起" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 定义 emits
const emit = defineEmits(['hide']);
import iconStatusPoint from "@/assets/icons/icon_status_point.png"; // 设备状态图标
import iconStatusPointOffline from "@/assets/icons/icon_status_point_offline.png"; // 设备状态图标-关机

// 收起icon
import foldBg from '@/assets/icons/icon_fold_left_bg.png' // 收起按钮的背景
import foldIconToLeft from '@/assets/icons/icon_fold_to_left_arrow.png' // 向左icon

const searchValue = ref(""); // 搜索内容

const deviceUAVImage = ref("https://s21.ax1x.com/2025/07/13/pVlfgAJ.png"); // 执行设备里用到的图片

// 设备列表数据
const deviceList = ref([
  {
    id: 1,
    name: "DJI Flip 畅飞套装",
    statusText: "空闲中",
    status: "idle",
  },
  {
    id: 2,
    name: "DJI Air 3S 畅飞套装",
    statusText: "空闲中",
    status: "idle",
  },
  {
    id: 3,
    name: "设备名称 001",
    statusText: "关机",
    status: "offline",
  },
  {
    id: 4,
    name: "设备名称 002",
    statusText: "空闲中",
    status: "idle",
  },
]);

// 选中的设备
const selectedDevice = ref(null);

// 选择设备
const selectDevice = (device) => {
  // 如果设备是离线状态，不允许选择
  if (device.status === "offline") {
    console.log("设备离线，无法选择");
    return;
  }

  // 如果点击已选中的设备，则取消选择
  if (selectedDevice.value?.id === device.id) {
    selectedDevice.value = null;
    console.log("取消选择设备");
  } else {
    selectedDevice.value = device;
    console.log("选择设备:", device.name);
  }
};

// 获取设备状态图标
const getStatusIcon = (status) => {
  if (status === "offline") {
    return iconStatusPointOffline;
  }
  return iconStatusPoint;
};

// 折叠状态
const isCollapsed = ref(false);

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
  // 如果折叠，通知父组件隐藏
  if (isCollapsed.value) {
    setTimeout(() => {
      emit('hide');
    }, 300); // 等待动画完成
  }
};
</script>

<style lang="scss" scoped>
// 引入 Element Plus 组件样式覆盖
@import "@/style/element-overrides.scss";

.search-device-panel {
  position: relative;
  width: 404px;
  height: 903px;
  background: url("@/assets/images/add_task_search_panel_bg.png") no-repeat
    center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;

    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(
        180deg,
        rgba(238, 238, 238, 1) 0%,
        rgba(238, 238, 238, 1) 40%,
        rgba(59, 135, 202, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }

  .panel-content {
    flex: 1;
    width: 100%;
    max-height: 903px;
    overflow-y: auto;
    padding: 30px 16px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;

    // 滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 2.5px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2.5px;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }

    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;

    // 搜索模块
    .search-module {
      width: 100%;
      margin-bottom: 16px;
    }

    // 设备列表
    .device-list-container {
      .device-list-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100px;
        padding: 8px;
        box-sizing: border-box;
        background: rgba(2, 92, 109, 0.3);
        backdrop-filter: blur(6px);
        cursor: pointer;
        transition: all 0.3s ease;

        & + .device-list-item {
          margin-top: 8px;
        }

        &:hover:not(.offline) {
          background: rgba(2, 92, 109, 0.5);
        }

        &.selected {
          box-shadow: inset 0px 0px 6px 1px rgba(0, 255, 244, 0.7);
        }
        .device-list-item-img {
          width: 84px;
          height: 84px;
          border-radius: 8px;
          overflow: hidden;
          margin-right: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .device-list-item-info {
          flex: 1;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          align-items: flex-start;
          align-self: stretch;
          padding: 10px 8px 10px 0;
          box-sizing: border-box;
          .device-name {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            .device-name-text {
              font-size: 16px;
              font-weight: 900;
              letter-spacing: 0px;
              line-height: 14px;
              color: rgba(255, 255, 255, 1);
            }
            .device-status {
              display: flex;
              flex-flow: row nowrap;
              justify-content: flex-start;
              align-items: center;
              .device-status-img {
                width: 12px;
                height: 12px;
                margin-right: 7px;
              }
              .device-status-text {
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 22px;
                color: rgba(255, 255, 255, 1);
              }
            }
          }
          .device-tag-container {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            .device-tag-item {
              border-radius: 4px;
              background: rgba(20, 109, 142, 1);
              padding: 1px 8px;
              font-size: 12px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 20px;
              color: rgba(255, 255, 255, 1);
            }
          }
        }
      }
    }
  }
  
  // 收起按钮
  .fold-btn {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    
    .fold-btn-bg {
      width: 30px;
      height: 82px;
    }
    
    .fold-btn-to-left-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
      
      &.rotated {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }
  }
}

// 自定义滚动条
.device-list {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 3px;

    &:hover {
      background: rgba(0, 255, 255, 0.5);
    }
  }
}
</style>
